<template>
    <el-dialog :title="title" v-model="drawer" width="700px" :append-to-body="true" @close="close">
        <el-form :model="form" :rules="rules" size="small" label-width="150px" ref="ruleRefForm" class="refForm">
            <el-form-item label="权益名称:" prop="title">
                <el-input v-model="form.title" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="显示名称:" prop="showTitle">
                <el-input v-model="form.showTitle" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="权益类型:" prop="rightType">
                <el-input v-model="form.rightType" placeholder="请输入权益类型"></el-input>
            </el-form-item>
            <el-form-item label="图标:" >
                <!-- <el-input v-model="form.image" ></el-input> -->
                <el-upload :file-list="form.backageImage" ref="uploadBanner" :action="uploadUrl" :headers="headers"
                    list-type="picture-card" :auto-upload="true" :multiple="false" :limit="1"
                    :on-success="backageImagesOnSuccess">
                    <el-icon>
                        <ele-Camera />
                    </el-icon>
                    <template #file="{ file }">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" />
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <el-icon>
                                    <ele-ZoomIn />
                                </el-icon>
                            </span>
                            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <el-icon>
                                    <ele-Delete />
                                </el-icon>
                            </span>
                        </span>
                    </template>
                </el-upload>

            </el-form-item>
            <el-form-item label="折扣数">
                <el-input-number v-model="form.number" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="权益介绍">
                <el-input v-model="form.rightExplain" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" size="small" @click="submitForm(ruleRefForm)">保存</el-button>
                <el-button size="small" @click="resetForm(ruleRefForm)">取消</el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogBannerVisible" title="图片预览">
        <img w-full :src="dialogImageUrl" alt="图片预览" style="display:block;margin: 0 auto;width:100%" />
    </el-dialog>

</template>

<script>
import {
    computed,
    reactive,
    toRefs,
    ref
} from 'vue'
import {
    ElMessage
} from 'element-plus'
import { create, update } from  '/@/api/ums/vipright'
import { Session } from '/@/utils/storage'
export default {
    name: 'VipCardRightDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        },
        title: {
            type: String,
            default: '新增'
        }
    },
    setup(props, context) {
        const {
            dialogDrawer,
            defaultForm
        } = toRefs(props)
        const ruleRefForm = ref()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        let form = computed({
            get: () => defaultForm.value,
            set: val => {
                context.emit('update:defaultForm', val)
            }
        })
        const state = reactive({
            uploadUrl: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            rules: {
                title: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }],
                showTitle: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }],
                rightType: [{
                    required: true,
                    message: '请输入类型',
                    trigger: 'blur'
                }],
                number: [{
                    required: true,
                    message: '请输入数值',
                    trigger: 'blur'
                }],
                rightExplain: [{
                    required: true,
                    message: '请输入数值',
                    trigger: 'blur'
                }],
            },
            dialogShopVisible: false,
            dialogImageUrl:'',
        dialogBannerVisible:false
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
                    let data = form.value
                    if (data.backageImage.length > 0) {
                        data.image = data.backageImage[0].url
                    } else {
                        data.image = null
                    }
                    if (data.id != null && data.id != '') {
                        update(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("修改成功");
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("修改失败");
                            }
                        })
                    }
                    // 新增
                    else {
                        create(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("添加成功");
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("添加失败");
                            }
                        })

                    }
                }
            })

        }
        const resetForm = (formEl) => {
            if (!formEl) return
            context.emit('update:dialogDrawer', false)
            formEl.resetFields()
        }

        const backageImagesOnSuccess = (response, uploadFiles) => {
            let d = []
            d.push({ name: response.data.name, url: response.data.src })
            form.value.backageImage = d
            form.value.image = form.value.backageImage[0].url
        }
       
        const handlePictureCardPreview = (file) => {
            state.dialogImageUrl = file.url
            state.dialogBannerVisible = true
        }
        const handleRemove = (val, file) => {
            uploadBanner.value.handleRemove(file)
        }
        return {
            drawer,
            form,
            submitForm,
            resetForm,
            close,
            ruleRefForm,
            backageImagesOnSuccess,
            handlePictureCardPreview,
            handleRemove,
            ...toRefs(state)
        }
    }

}
</script>

<style>

</style>
